<template>
    <div class="container">
        <view>
            <h1 class="title">全员安全教育培训：构建风险防控新防线</h1>
        </view>
        <u-line color="#E1E5E8" style="border-bottom-width:5px"></u-line>
        <view>
            <!-- <rich-text :nodes="formattedContent" class="ql-editor rich-content" user-select="true" space="nbsp"  catchtap="catchImage"/> -->
            <!-- <mp-html :content="content"></mp-html> -->
        </view>
    </div>
</template>

<script>
import { getInfo } from "@/api/article/index";
// import mpHtml from 'mp-html';
export default {
    components: {
        // mpHtml
    },
    data() {
        return {
            articleId: 0,
            content: '',

        };
    },
    computed: {
        formattedContent() {
            // 将图片添加点击事件
            return this.content.replace(/<img/g, '<img');
        },
    },
    onLoad(options) {
        // 获取navigateTo携带的参数
        this.articleId = options.id; // 获取id并存储
        //获取文章数据
        this.getArticleInfo();
    },

    mounted() {

    },
    methods: {
        async getArticleInfo() {
            const { data, code, msg } = await getInfo({ articleContentId: this.articleId });
            this.content = data.articleContent;
        },
        handleImageClick(event) {
            const imgSrc = event.target.src; // 获取图片的src
            // 处理点击事件，例如打开图片查看器
            uni.previewImage({
                urls: [imgSrc], // 预览的图片数组
            });
        },


    }
}
</script>

<style scoped>
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #fff;
}

.title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333333;
}

.content {
    margin-bottom: 15px;
    font-size: 16px;
    color: #6B6B6B;
}
</style>